<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        body {
            min-height: 1024px;
        }
        .chart-container {
            width: 100%;
            height: 300px;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen">
        <aside class="w-64 bg-white shadow-lg">
            <div class="p-4 border-b">
                <h1 class="text-xl font-bold text-primary">失物招领管理系统</h1>
            </div>
            <nav class="p-4">
                <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-button">
                    <i class="fas fa-users w-5 h-5 mr-3"></i>
                    用户管理
                </a>
                <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-button">
                    <i class="fas fa-box w-5 h-5 mr-3"></i>
                    失物管理
                </a>
                <a href="#" class="flex items-center px-4 py-2 text-white bg-primary rounded-button">
                    <i class="fas fa-chart-line w-5 h-5 mr-3"></i>
                    数据统计
                </a>
            </nav>
        </aside>

        <main class="flex-1 overflow-auto">
            <header class="bg-white shadow-sm p-4">
                <div class="flex justify-between items-center">
                    <h2 class="text-xl font-bold">数据统计</h2>
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center space-x-2">
                            <span>管理员：王晓明</span>
                            <button class="px-4 py-2 text-white bg-primary hover:bg-blue-600 rounded-button whitespace-nowrap">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出
                            </button>
                        </div>
                    </div>
                </div>
            </header>
            <div class="p-6">
                <div class="grid grid-cols-4 gap-6 mb-6">
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500">总用户数</p>
                                <p class="text-2xl font-bold mt-2">12,458</p>
                            </div>
                            <span class="text-green-500">
                                <i class="fas fa-arrow-up mr-1"></i>
                                12.5%
                            </span>
                        </div>
                        <div id="userTrend" class="h-12 mt-4"></div>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500">物品总数</p>
                                <p class="text-2xl font-bold mt-2">8,936</p>
                            </div>
                            <div class="text-sm">
                                <p class="text-blue-500">已认领: 6,247</p>
                                <p class="text-orange-500">未认领: 2,689</p>
                            </div>
                        </div>
                        <div id="itemProgress" class="h-12 mt-4"></div>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500">今日发布</p>
                                <p class="text-2xl font-bold mt-2">156</p>
                            </div>
                            <span class="text-red-500">
                                <i class="fas fa-arrow-down mr-1"></i>
                                5.2%
                            </span>
                        </div>
                        <div id="todayTrend" class="h-12 mt-4"></div>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500">认领完成率</p>
                                <p class="text-2xl font-bold mt-2">69.8%</p>
                            </div>
                        </div>
                        <div id="completionRate" class="h-12 mt-4"></div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-6 mb-6">
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-lg font-bold mb-4">失物发布趋势</h3>
                        <div class="flex space-x-4 mb-4">
                            <button class="px-3 py-1 text-sm bg-primary text-white rounded-button whitespace-nowrap">周</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-button whitespace-nowrap">月</button>
                            <button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-button whitespace-nowrap">年</button>
                        </div>
                        <div id="publishTrend" class="chart-container"></div>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-lg font-bold mb-4">处理效率分析</h3>
                        <div class="flex items-center space-x-4 mb-4">
                            <div class="flex-1">
                                <input type="text" class="w-full px-4 py-2 border rounded-button" placeholder="选择时间范围">
                            </div>
                            <button class="px-4 py-2 bg-primary text-white rounded-button whitespace-nowrap">
                                <i class="fas fa-sync-alt mr-2"></i>刷新
                            </button>
                        </div>
                        <div id="efficiencyAnalysis" class="chart-container"></div>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-6 mb-6">
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-lg font-bold mb-4">物品类型分布</h3>
                        <div id="itemTypes" class="chart-container"></div>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-lg font-bold mb-4">地点热力分析</h3>
                        <div id="locationHeat" class="chart-container"></div>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h3 class="text-lg font-bold mb-4">时段分布</h3>
                        <div id="timeDistribution" class="chart-container"></div>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow">
                    <div class="p-6 border-b">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-bold">详细数据</h3>
                            <button class="px-4 py-2 bg-primary text-white rounded-button whitespace-nowrap">
                                <i class="fas fa-download mr-2"></i>导出 Excel
                            </button>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物品类型</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布量</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">认领量</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成率</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">2023-12-01</td>
                                    <td class="px-6 py-4 whitespace-nowrap">电子设备</td>
                                    <td class="px-6 py-4 whitespace-nowrap">42</td>
                                    <td class="px-6 py-4 whitespace-nowrap">35</td>
                                    <td class="px-6 py-4 whitespace-nowrap">83.3%</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">2023-12-01</td>
                                    <td class="px-6 py-4 whitespace-nowrap">证件卡片</td>
                                    <td class="px-6 py-4 whitespace-nowrap">56</td>
                                    <td class="px-6 py-4 whitespace-nowrap">48</td>
                                    <td class="px-6 py-4 whitespace-nowrap">85.7%</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">2023-12-01</td>
                                    <td class="px-6 py-4 whitespace-nowrap">生活用品</td>
                                    <td class="px-6 py-4 whitespace-nowrap">38</td>
                                    <td class="px-6 py-4 whitespace-nowrap">25</td>
                                    <td class="px-6 py-4 whitespace-nowrap">65.8%</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">2023-12-01</td>
                                    <td class="px-6 py-4 whitespace-nowrap">现金钱包</td>
                                    <td class="px-6 py-4 whitespace-nowrap">20</td>
                                    <td class="px-6 py-4 whitespace-nowrap">18</td>
                                    <td class="px-6 py-4 whitespace-nowrap">90.0%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        function initCharts() {
            const userTrend = echarts.init(document.getElementById('userTrend'));
            const itemProgress = echarts.init(document.getElementById('itemProgress'));
            const todayTrend = echarts.init(document.getElementById('todayTrend'));
            const completionRate = echarts.init(document.getElementById('completionRate'));
            const publishTrend = echarts.init(document.getElementById('publishTrend'));
            const efficiencyAnalysis = echarts.init(document.getElementById('efficiencyAnalysis'));
            const itemTypes = echarts.init(document.getElementById('itemTypes'));
            const locationHeat = echarts.init(document.getElementById('locationHeat'));
            const timeDistribution = echarts.init(document.getElementById('timeDistribution'));
            userTrend.setOption({
                animation: false,
                grid: {
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0
                },
                xAxis: {
                    type: 'category',
                    show: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    areaStyle: {
                        color: '#3b82f6',
                        opacity: 0.2
                    },
                    lineStyle: {
                        color: '#3b82f6'
                    }
                }]
            });

            publishTrend.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['发布量', '认领量']
                },
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '发布量',
                    type: 'line',
                    data: [150, 230, 224, 218, 135, 147, 260]
                }, {
                    name: '认领量',
                    type: 'line',
                    data: [120, 182, 191, 164, 90, 120, 210]
                }]
            });

            efficiencyAnalysis.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['电子设备', '证件卡片', '生活用品', '现金钱包', '其他物品']
                },
                yAxis: {
                    type: 'value',
                    name: '平均处理时长(小时)'
                },
                series: [{
                    type: 'bar',
                    data: [4.2, 2.1, 3.5, 1.8, 5.2]
                }]
            });

            itemTypes.setOption({
                animation: false,
                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    type: 'pie',
                    radius: '70%',
                    data: [
                        {value: 1048, name: '电子设备'},
                        {value: 735, name: '证件卡片'},
                        {value: 580, name: '生活用品'},
                        {value: 484, name: '现金钱包'},
                        {value: 300, name: '其他物品'}
                    ]
                }]
            });

            locationHeat.setOption({
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['图书馆', '教学楼', '食堂', '宿舍楼', '体育馆']
                },
                series: [{
                    type: 'bar',
                    data: [320, 302, 301, 334, 390]
                }]
            });

            timeDistribution.setOption({
                animation: false,
                xAxis: {
                    type: 'category',
                    data: ['00:00', '06:00', '12:00', '18:00', '24:00']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'scatter',
                    symbolSize: function (data) {
                        return Math.sqrt(data[1]) * 5;
                    },
                    data: [
                        [0, 5],
                        [6, 30],
                        [12, 85],
                        [18, 50],
                        [24, 10]
                    ]
                }]
            });
        }

        window.addEventListener('load', initCharts);
        window.addEventListener('resize', function() {
            const charts = document.querySelectorAll('[id$="Trend"],[id$="Progress"],[id$="Rate"],[id$="Analysis"],[id$="Types"],[id$="Heat"],[id$="Distribution"]');
            charts.forEach(chart => {
                echarts.getInstanceByDom(chart)?.resize();
            });
        });
    </script>
</body>
</html>